<template>
  <view v-if="visible" class="modal-overlay" @click.stop="handleClose"></view>
  <view v-if="visible" class="filter-modal">    
    <view class="modal-top">
      <view class="filter-header" @click="handleClose">
        <text>综合筛选</text>
        <view class="icon">
          <image src="/static/icons/setting.png" mode="aspectFit"></image>
        </view>
      </view>
      <view class="filter-content">
        <view class="filter-group">
          <text class="group-title">难度：</text>
          <view class="filter-buttons">
            <view 
              v-for="difficulty in difficulties" 
              :key="difficulty"
              :class="['filter-button', { 'active': selectedDifficulty === difficulty }]" 
              @click="selectDifficulty(difficulty)"
            >
              {{ difficulty }}
            </view>
          </view>
        </view>
        
        <view class="filter-group">
          <text class="group-title">掌握程度：</text>
          <view class="filter-buttons">
            <view 
              v-for="mark in markOptions" 
              :key="mark.value"
              :class="['filter-button', { 'active': selectedMark === mark.value }]" 
              @click="selectMark(mark.value)"
            >
              <image :src="mark.icon" class="mark-icon" :class="mark.iconClass"></image>
              {{ mark.label }}
            </view>
          </view>
        </view>
        
        <view class="filter-group">
          <text class="group-title">会员专属：</text>
          <view class="filter-buttons">
            <view 
              v-for="option in exclusiveOptions" 
              :key="option"
              :class="['filter-button', { 'active': selectedExclusive === option }]" 
              @click="selectExclusive(option)"
            >
              {{ option }}
            </view>
          </view>
        </view>
      </view>
      
      <view class="filter-footer">
        <view class="button" @click="resetFilters">重置</view>
        <view class="button finButton" @click="applyFilters">完成 (已选{{ selectedCount }})</view>
      </view> 
    </view>
  </view>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits, watch } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  initialFilters: {
    type: Object,
    default: () => ({
      difficulty: '',
      mark: '',
      exclusive: ''
    })
  }
});

const emit = defineEmits(['close', 'apply']);

// 筛选选项
const difficulties = ['简单', '中等', '困难'];
const markOptions = [
  { value: '已掌握', label: '已掌握', icon: '/static/icons/checked.png', iconClass: 'icon-checked' },
  { value: '晚点再刷', label: '晚点再刷', icon: '/static/icons/alarm.png', iconClass: 'icon-wait' },
  { value: '不掌握了', label: '未掌握', icon: '/static/icons/wrong.png', iconClass: 'icon-cross' }
];
const exclusiveOptions = ['是', '否'];

// 选中的筛选条件
const selectedDifficulty = ref(props.initialFilters.difficulty || '');
const selectedMark = ref(props.initialFilters.mark || '');
const selectedExclusive = ref(props.initialFilters.exclusive || '');

// 监听初始筛选条件变化
watch(() => props.initialFilters, (newVal) => {
  selectedDifficulty.value = newVal.difficulty || '';
  selectedMark.value = newVal.mark || '';
  selectedExclusive.value = newVal.exclusive || '';
}, { deep: true });

// 选择难度筛选
const selectDifficulty = (value) => {
  if (selectedDifficulty.value === value) {
    selectedDifficulty.value = '';
  } else {
    selectedDifficulty.value = value;
  }
};

// 选择标记筛选
const selectMark = (value) => {
  if (selectedMark.value === value) {
    selectedMark.value = '';
  } else {
    selectedMark.value = value;
  }
};

// 选择会员专属筛选
const selectExclusive = (value) => {
  if (selectedExclusive.value === value) {
    selectedExclusive.value = '';
  } else {
    selectedExclusive.value = value;
  }
};

// 重置筛选
const resetFilters = () => {
  selectedDifficulty.value = '';
  selectedMark.value = '';
  selectedExclusive.value = '';
};

// 应用筛选
const applyFilters = () => {
  emit('apply', {
    difficulty: selectedDifficulty.value,
    mark: selectedMark.value,
    exclusive: selectedExclusive.value
  });
};

// 关闭模态框
const handleClose = () => {
  emit('close');
};

// 计算已选筛选条件数量
const selectedCount = computed(() => {
  let count = 0;
  if (selectedDifficulty.value) count++;
  if (selectedMark.value) count++;
  if (selectedExclusive.value) count++;
  return count;
});
</script>

<style lang="scss">
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  pointer-events: auto;
}

.filter-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  font-size: 28rpx;
  z-index: 101;
  height: auto;
  max-height: 80vh;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  pointer-events: auto;
  overflow-y: auto;
  
  .modal-top {
    .filter-header {
      display: flex;
      align-items: center;
      height: 20rpx;
      margin-top: 20rpx;
      margin-left: 70%;
      
      image {
        margin-left: 10rpx;
        width: 30rpx;
        height: 30rpx;
      }
    }
    
    .filter-content {
      .filter-group {
        margin-bottom: 20rpx;
        
        .group-title {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 10rpx;
        }
        
        .filter-buttons {
          display: flex;
          flex-wrap: wrap;
          padding: 10rpx 0;
          
          .filter-button {
            display: flex;
            align-items: center;
            padding: 10rpx 20rpx;
            border: 1rpx solid #ccc;
            border-radius: 10rpx;
            margin-right: 20rpx;
            margin-bottom: 10rpx;
            font-size: 26rpx;
            color: #666;
            background-color: #f9f9f9;
            
            &.active {
              background-color: #f6960a;
              color: #fff;
              border-color: #f6960a;
            }
            
            .mark-icon {
              margin-right: 10rpx;
              width: 30rpx;
              height: 30rpx;
              
              &.icon-checked {
                color: #4cd964;
              }
              
              &.icon-wait {
                color: #f6960a;
              }
              
              &.icon-cross {
                color: #ff3b30;
              }
            }
          }
        }
      }
    }
    
    .filter-footer {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      
      .button {
        padding: 15rpx 50rpx;
        border: 1rpx solid #ccc;
        border-radius: 10rpx;
        font-size: 28rpx;
        color: #666;
        background-color: #f9f9f9;
        
        &.finButton {
          background-color: #f6960a;
          color: #fff;
          border-color: #f6960a;
        }
      }
    }
  }
}
</style>